<!DOCTYPE html>
<html ng-app="app" lang="en">
    <head>
        <meta charset="UTF-8">
        <title ng-bind="title"></title>
        <link rel="stylesheet" href="../../style/css/bootstrap.css">
        <link rel="stylesheet" href="../../style/css/matrix-style.css">
        <link rel="stylesheet" href="timepicker.css">
        <script src="../../../node_modules/angular/angular.js"></script>
        <script src="../../a.ui.js"></script>
        <script src="../i18n/angular-locale_zh-cn.js"></script>
        <script src="timepicker.js"></script>
        <script>
            // bootstrap app
            var app = angular.module('app', ['a.ui']);
            app.controller('TimepickerDemoCtrl', function ($rootScope, $scope, $log) {
                $rootScope.title = 'Timepicker';
                $scope.mytime = new Date();

                $scope.hstep = 1;
                $scope.mstep = 15;

                $scope.options = {
                    hstep: [1, 2, 3],
                    mstep: [1, 5, 10, 15, 25, 30]
                };

                $scope.ismeridian = true;
                $scope.toggleMode = function () {
                    $scope.ismeridian = !$scope.ismeridian;
                };

                $scope.update = function () {
                    var d = new Date();
                    d.setHours(14);
                    d.setMinutes(0);
                    $scope.mytime = d;
                };

                $scope.changed = function () {
                    $log.log('时间改变: ' + $scope.mytime);
                };

                $scope.clear = function () {
                    $scope.mytime = null;
                };
            })
        </script>
    </head>
    <body>
        <div class="container" ng-controller="TimepickerDemoCtrl">
            <h1 class="text-center" ng-bind="title"></h1>

            <a-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></a-timepicker>

            <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
            <div class="row">
                <div class="col-xs-6">
                    Hours step is:
                    <select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
                </div>
                <div class="col-xs-6">
                    Minutes step is:
                    <select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
                </div>
            </div>
            <hr>
            <button type="button" class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
            <button type="button" class="btn btn-default" ng-click="update()">设置为 14:00</button>
            <button type="button" class="btn btn-danger" ng-click="clear()">清除</button>
        </div>
    </body>
</html>